<template>
	<view class="page-body" :class="[app.setCStyle()]">
		<view class="top_title" :class="!top_bg ? 'no-bg':''" :style="{'background-image':'url('+top_bg+')','color':top_txt_color}">
			<!-- #ifndef H5 -->
			<view class="window-top mb40"></view>
			<!-- #endif -->
			<view class="fs34 text-center p20"></view>
			<view class="u-flex u-row-right u-p-r-20">
				<u-icon name="bell" size="48" @click="app.goPage('/pages/public/message/index')"></u-icon>
				<u-badge v-if="isRead==0" :is-dot="true" size="mini" :offset="[30, 20]"></u-badge>
			</view>
		</view>
		<view class="top_box" :class="!top_bg ? 'no-bg':''" :style="{'background-image':'url('+top_bg+')', 'color':top_txt_color}">
			<view class="user_info relative smll">
				<view class="headimgurl " @click="app.goPage('editInfo')">
					<image width="120rpx" height="120rpx" mode="aspectFill"
						:src="headimgurl?headimgurl:'/static/public/images/headimgurl.jpg'"></image>
				</view>
				<view class="flex_bd ml20">
					<view class="smll">
						<text class="fs30 nickname u-m-r-20">{{userInfo.nick_name}}</text>
						<!-- <text class="fs30">等级攻略>></text> -->
					</view>
					<view class="smll mt20">
						<u-tag class="mr10" :text="userInfo.role.role_name" size="mini" type="warning" mode="dark" />
						<view class="mr30 fs24">UID：{{userInfo.user_id}}</view>
					</view>
					<view class="mt20 fs22">
						<view>绑定号码：{{userInfo.mobile}}</view>
					</view>
				</view>
				<view class="icon_set smll" @click="app.goPage('/pages/member/center/sign')">
					<u-icon name="/static/public/images/sign-icon.png" size="48"></u-icon>
					<view class="set_text">签到</view>
				</view>
				<!-- <view class="icon_set smll" @click="doSign">
					<u-icon name="/static/public/images/sign-icon.png" size="48"></u-icon>
					<view class="set_text">{{isSign ? '已签到' : '签到'}}</view>
				</view> -->
			</view>
			<view class="card_box fs40">
				<view class="plr20 fs28 font-w600 u-border-bottom u-p-b-20">我的钱包</view>
				<u-grid :col="2" :border="false" class="u-p-t-20 u-p-b-20">
					<u-grid-item style="border-right:1px solid #f5f5f5;" bg-color="none" class="p0"
						@click="app.goPage('/pages/member/wallet/balanceMoney')">
						<view class="ff">{{userInfo.account.balance_money}}</view>
						<view class="fs26 color-99">帐户余额</view>
					</u-grid-item>

					<u-grid-item bg-color="none" class="p0" @click="app.goPage('/pages/member/wallet/score')">
						<view class="ff">{{userInfo.account.use_integral}}</view>
						<view class="fs26 color-99">积分</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="pbox" style="margin-top: 140rpx;">
			<view class="menu_box mt20">
				<view class="p20">
					<text class="fs28 font-w600">我的订单</text>
					<view class="fs24 fr color-99 font-wn" @click="app.goPage('/pages/shop/order/list?state=0')">
						查看全部<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<!-- <u-grid :col="setting.shop_after_sale_limit > 0 ? 5 : 4" class="fs28" :border="false"> -->
				<u-grid :col="5" class="fs28" :border="false">
					<u-grid-item @click="app.goPage('/pages/shop/order/list?state=1')">
						<u-badge :count="orderStats.wait_pay_num" :offset="[20, 60]"></u-badge>
						<u-icon :name="baseUrl+setting.user_center_oicon_wait_pay" :size="48"></u-icon>
						<view class="mt10 fs26 color-99">待付款</view>
					</u-grid-item>
					<u-grid-item @click="app.goPage('/pages/shop/order/list?state=2')">
						<u-badge :count="orderStats.wait_shipping_num" :offset="[20, 60]"></u-badge>
						<u-icon :name="baseUrl+setting.user_center_oicon_wait_shipping" :size="48"></u-icon>
						<view class="mt10 fs26 color-99">待发货</view>
					</u-grid-item>
					<u-grid-item @click="app.goPage('/pages/shop/order/list?state=3')">
						<u-badge :count="orderStats.wait_sign_num" :offset="[20, 60]"></u-badge>
						<u-icon :name="baseUrl+setting.user_center_oicon_wait_sign" :size="48"></u-icon>
						<view class="mt10 fs26 color-99">待收货</view>
					</u-grid-item>
					<u-grid-item @click="app.goPage('/pages/shop/order/list?state=4')">
						<u-icon :name="baseUrl+setting.user_center_oicon_sign" :size="48"></u-icon>
						<view class="mt10 fs26 color-99">已完成</view>
					</u-grid-item>
					<u-grid-item @click="app.goPage('/pages/shop/aftersale/index')">
						<u-icon :name="baseUrl+setting.user_center_oicon_after_sale" :size="48"></u-icon>
						<view class="mt10 fs26 color-99">退货/售后</view>
					</u-grid-item>

				</u-grid>
			</view>
			<view class="menu_box mt20">
				<view class="p20 b-tottom">
					<text class="fs30 font-w700">我的工具</text>
				</view>
				<u-grid v-if="setting.user_center_nav_tpl == 0" :col="4" class="fs28" :border="false">
					<u-grid-item v-for="(item, index) in navMenu" :key="index" class="mt10 mb10"
						@click="centerNav(item)">
						<u-icon :name="baseUrl+item.imgurl" :size="48"></u-icon>
						<view class="mt10 fs24">{{item.title}}</view>
					</u-grid-item>
					<!-- <u-grid-item v-if="is_channel" class="mt10 mb10" @click="app.goPage('/pagesB/channel/center/index')">
						<u-icon :name="baseUrl+'a_static/menuimg/center_myproxy.png'" :size="48"></u-icon>
						<view class="mt10 fs24">进入代理端</view>
					</u-grid-item> -->
				</u-grid>
				<view v-if="setting.user_center_nav_tpl == 1" v-for="(item, index) in navMenu" :key="index">
					<view class="list-cell b-b mt20" @click="centerNav(item)" hover-class="cell-hover"
						:hover-stay-time="50">
						<u-icon :name="baseUrl+item.imgurl" :size="48" class="mr20"></u-icon>
						<view class="cell-tit fs28"> {{item.title}}</view>
						<view class="cell-more">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<!-- <view v-if="is_channel" class="list-cell b-b mt20" @click="centerNav('/pagesB/channel/center/index')" hover-class="cell-hover" :hover-stay-time="50">
						<u-icon :name="baseUrl+'a_static/menuimg/center_myproxy.png'" :size="48" class="mr20"></u-icon>
						<view class="cell-tit fs28">进入代理端</view>
						<view class="cell-more">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view> -->
				</view>
			</view>

			<view @click="app.goPage('set')" class="menu_box mt20 u-m-b-50 u-p-t-30 u-p-r-20 u-p-b-30 u-p-l-20">
				<u-section title="设置" :show-line="false" sub-title="" font-size="32rpx" @click="app.goPage('set')">
				</u-section>
			</view>

		</view>
		<tabbar :_current="3" :getCartNum="0"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/pages/shop/tabbar';
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				baseUrl: this.config.baseUrl,
				setting: {},
				top_bg: '',
				top_txt_color: '',
				userInfo: {
					role: {},
					account: {}
				},
				orderStats: {},
				collectNum: 0,
				headimgurl: '',
				navMenu: {},
				teamCount: {},
				is_channel: false,
				isSign: false,
				isRead: ''
			}
		},
		onLoad(options) {
			this.$u.post('member/api.Users/checkLevel').then(res => {
				if (res.code == 1) {
					uni.showModal({
						title: '提示',
						content: res.msg,
						showCancel: false,
						success: function(returns) {
							if (returns.confirm) {
								uni.navigateTo({
									url: '/pagesB/channel/upgrade/index'
								});
							}
						}
					});
					return false;
				}
			});

			this.getIsRead();
			this.signIndex();
		},
		onShow() {
			this.app.isLogin(this); //强制登陆
			this.setting = uni.getStorageSync("setting");
			if (this.setting.user_center_top_bg != '') {
				this.top_bg = this.config.baseUrl + this.setting.user_center_top_bg;
			}
			if (this.setting.user_center_top_txt_color != '') {
				this.top_txt_color = this.setting.user_center_top_txt_color;
			}
			let that = this;
			if (this.setting.user_center_top_nav_bgc != '') {
				setTimeout(function() {
					uni.setNavigationBarColor({
						backgroundColor: that.setting.user_center_top_nav_bgc
					});
				}, 500);
			}
			this.getCenterInfo();
			this.getIsRead();
		},
		methods: {
			getIsRead() {
				//判断是否有未读信息
				//判断是否有未读信息
				this.$u.post('publics/api.message/isRead').then(res => {
					if (res.code == 1) {
						this.isRead = res.data.is_read;
					}
				});

			},
			getCenterInfo() {
				//获取会员中心信息
				this.$u.post('member/api.center/getCenterInfo').then(res => {
					this.userInfo = res.data.userInfo;
					this.orderStats = res.data.orderStats;
					this.collectNum = res.data.collectNum;
					this.navMenu = res.data.navMenu;
					this.teamCount = res.data.teamCount;
					if (this.userInfo.headimgurl != '') {
						this.headimgurl = this.config.baseUrl + this.userInfo.headimgurl;
					}
					this.is_channel = res.data.is_channel;

					let ua = navigator.userAgent.toLowerCase();
					////////////////////////////////提示绑定微信
					if (ua.match(/MicroMessenger/i) == "micromessenger") {
						if (res.data.weixin_users_count == 0) {
							uni.showModal({
								title: '提示',
								content: '请前往绑定微信',
								success: function(res) {
									if (res.confirm) {

										uni.redirectTo({
											url: '/pages/member/center/set'
										});
										return false;

									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
					}
				});
			},
			centerNav(item) {
				if (item.bind_type == 'tel') {
					uni.makePhoneCall({
						// 手机号
						phoneNumber: item.url + '',
						// 成功回调
						success: (res) => {
							console.log('调用成功!')
						},
						// 失败回调
						fail: (res) => {
							console.log('调用失败!')
						}
					});
				} else {
					this.app.goPage(item.url);
				}
			},
			//签到
			doSign() {
				if (this.isSign == false) {
					this.$u.post('member/api.Center/signIng').then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: '签到成功',
								duration: 2000,
								icon: 'none'
							});
							let that = this;
							setTimeout(function() {
								that.signIndex()
							}, 2000)
						}
					});
				} else {
					uni.showToast({
						title: '您今天已经签到过了',
						icon: 'none',
						duration: 2000
					});
				}
			},
			//获取签到信息
			signIndex() {
				this.$u.post('member/api.Center/signIndex').then(res => {
					if (res.code == 1 && res.data.signDay) {
						this.isSign = res.data.isSign == 1 ? true : false;
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.page-body .no-bg {
		background: #fff;
		color: #333;

	}

	.u-badge {
		z-index: 999;
	}

	.top_title {
		position: relative;
		top: 0;
		width: 100%;
		z-index: 99;
		background-size: 100%;
		background-repeat: no-repeat;
		/* #ifdef H5 */
		height: 80rpx;
		background-position: 0rpx -130rpx;
		/* #endif */
		/* #ifndef H5*/
		height: calc(80rpx + var(--status-bar-height) + var(--status-bar-height));
		/* #endif */
		color: #FFFFFF;
	}

	.top_box {
		height: 340rpx;
		background-repeat: no-repeat;
		background-size: 100%;
		/* #ifdef H5 */
		background-position: 0rpx -220rpx;
		/* #endif */
		/* #ifndef H5*/
		background-position: 0rpx calc(-90rpx - var(--status-bar-height) - var(--status-bar-height));
		/* #endif */
		color: #FFFFFF;

		.user_info {
			height: 200rpx;
		}

		.headimgurl {
			margin-left: 20rpx;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;
			border: 3rpx solid #FFFFFF;
			background-color: #FFFFFF;

			image {
				border-radius: 50%;
				width: 100%;
				height: 100%;
			}
		}

		.headimgEdit {
			position: absolute;
			top: 100rpx;
			left: 70rpx;
		}

		.icon_set {
			position: absolute;
			top: 90rpx;
			right: 0;
			text-align: center;
			width: 180rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #000000;
			opacity: 0.4;
			border-radius: 30rpx 0px 0px 30rpx;
			padding-left: 10rpx;

			.set_text {
				margin-left: 10rpx;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}

	.card_box {
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx;
		width: auto;
		color: $font-color-dark;
		padding: 30rpx 0;
	}

	.nickname {
		min-width: 100rpx;
		max-width: 270rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		-webkit-box-orient: vertical;
	}

	.sf-label {
		min-width: 90rpx;
		line-height: 30rpx;
		font-size: 22rpx;
		color: #ffffff;
		border-radius: 4rpx;
		border: solid 1rpx #ffffff;
		padding: 2rpx 10rpx;
		display: inline-block;
		text-align: center;
	}

	.menu_box {
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}
</style>
